import { Button, Drawer, DrawerProps, Form, Input, Spin } from 'antd';
import { memo, useRef } from 'react';
import { QueryObserverResult, RefetchOptions, RefetchQueryFilters } from 'react-query';
import { useForm } from 'antd/es/form/Form';
import { useAddBeefSolveStep } from '../../../service/beef/beef-solve-service';
import { IUploadImgRefHandler, UploadImage } from '../../../components/upload-img';
import { IWokrStatistic } from '../../../service/beef/beef-service';


type IProcessForm = {
    beefId?: string;
    open: boolean;
    refetch?: <TPageData>(options?: (RefetchOptions & RefetchQueryFilters<TPageData>) | undefined) => Promise<QueryObserverResult<IWokrStatistic, unknown>>
    openFn: (open: boolean) => void;
} & DrawerProps;


const ProcessForm = ({ beefId, openFn, open, refetch, ...props }: IProcessForm) => {

    const [form] = useForm();
    /**
       * !添加矛盾纠纷步骤;
       */
    const { mutateAsync: addMutation, isLoading: addIsLoading } = useAddBeefSolveStep();
    //图片附件的引用
    const imageRef = useRef<IUploadImgRefHandler>();


    /**
     * 保存方法
     */
    const saveHandler = async () => {
        //设置图片
        form.setFieldValue("imgUrls", imageRef.current?.getUrls());
        const isPass = form.validateFields();
        if (!isPass) {
            return
        }
        const values = form.getFieldsValue();
        console.log(values,'流程')
        
        await addMutation({ ...values, beefId });
        refetch?.();
        openFn(false);
        form.resetFields();
    }



    return (
        <Drawer title={'添加处理'} placement="right" width={'35rem'} closable={true} onClose={() => openFn(false)} forceRender={true} open={open} footer={
            <Button onClick={() => { saveHandler(); }}>
                保存
            </Button>
        }>
            <Spin spinning={addIsLoading}>
                <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
                    <Form.Item label={'调解描述'} name={'stepDesp'} rules={[{ required: true, message: '调解描述不能为空' }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item label={'图片附件'} name={'imgUrls'}>
                        <UploadImage onRef={imageRef} maxCount={99} />
                    </Form.Item>
                </Form>
            </Spin>
        </Drawer>
    );
};


export default memo(ProcessForm)